<template>
  <view class="goods-card">
    <view class="image-wrap">
      <image :src="data.image|formatFilePath" mode="aspectFill" class="image" />
    </view>
    <view class="goods-info-wrap">
      <view class="goods-top">
        <view class="goods-title">
          <text>{{ data.title }}</text>
        </view>
        <view class="goods-stock">
          <text>{{ stock }}</text>
        </view>
      </view>
      <view class="goods-bottom">
        <view class="goods-price">
          <text>￥{{ data.price|formatPrice }}</text>
        </view>
        <view v-if="!isSort" class="goods-action">
          <view class="action-btn" @click="handleClickDelete">
            <text>移除</text>
          </view>
          <view class="action-btn" @click="handleClickEdit">
            <text>编辑</text>
          </view>
        </view>
        <view v-if="isSort" class="goods-action">
          <SortButton :up-disabled="upDisabled" :down-disabled="downDisabled" @up="handleUp" @down="handleDown" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import SortButton from "../SortButton/index.vue";
export default {
  components: {
    SortButton
  },
  props: {
    // edit sort
    upDisabled: {},
    downDisabled: {},
    isSort: {
      type: Boolean,
      default: () => false
    },
    data: {
      type: Object,
      default() {
        return {
          // catId: 68,
          // createdAt: "2020-05-20 18:17:31",
          // deletedAt: null,
          // desc: "斤肉您咯",
          // id: 24,
          // image: "15899697385699729fd976e692d1d969e08da3a24547f.jpg",
          // isRecommend: false,
          // price: "2.00",
          // props: [
          //   {
          //     key: "",
          //     values: []
          //   }
          // ],
          // shopId: 2,
          // skuList: [
          //   {
          //     createdAt: "2020-05-20 18:17:31",
          //     deletedAt: null,
          //     goodsId: 24,
          //     id: 38,
          //     price: "2.00",
          //     spec: [{ key: "杯型", value: "大杯" }],
          //     stock: null,
          //     title: "红烧肉",
          //     updatedAt: "2020-05-20 18:17:31"
          //   }
          // ],
          // sort: 1589969851139,
          // title: "红烧肉",
          // updatedAt: "2020-05-20 18:17:31"
        };
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    stock() {
      let haveSpec =
        this.data.skuList[0] && this.data.skuList[0].spec ? true : false;
      let stock = null;
      if (!haveSpec) {
        stock = this.$isNull(this.data.skuList[0] && this.data.skuList[0].stock)
          ? "不限量"
          : this.data.skuList[0].stock;
      } else {
        stock = this.data.skuList
          .map(v => {
            let stock = this.$isNull(v.stock) ? "不限量" : v.stock;
            return `${v.spec && v.spec[0].value} ${stock}`;
          })
          .join(" ");
      }
      return stock;
    }
  },
  methods: {
    handleUp() {
      this.$emit("up", this.data);
    },
    handleDown() {
      this.$emit("down", this.data);
    },
    handleClickDelete() {
      uni.showModal({
        title: "提示",
        content: "确认移除该商品？",
        success: res => {
          if (res.confirm) this.$emit("delete", this.data);
        }
      });
    },
    handleClickEdit() {
      this.$emit("edit", this.data);
    }
  }
};
</script>

<style scoped lang="scss">
.goods-card {
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 10rpx;
  box-sizing: border-box;
  .image-wrap {
    height: 150rpx;
    width: 150rpx;
    border: 1px solid $border-color;
    .image {
      height: 100%;
      width: 100%;
    }
  }
  .goods-info-wrap {
    padding-left: 16rpx;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    .goods-top {
      // display: flex;
      // flex-direction: column;
      .goods-title {
        font-size: $uni-font-size-lg;
        color: $uni-text-color;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .goods-stock {
        font-size: $uni-font-size-sm;
        color: $uni-text-color-grey;
      }
    }
    .goods-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      align-items: flex-end;
      .goods-price {
        color: $uni-color-error;
        font-size: $uni-font-size-lg;
        width: calc(100% - 180rpx);
        word-wrap: break-word;
        word-break: normal;
      }
      .goods-action {
        min-width: 180rpx;
        .action-btn {
          display: inline-block;
          font-size: $uni-font-size-base;
          border: 1px solid $uni-color-primary;
          color: $uni-color-primary;
          padding: 5rpx 10rpx;
          &:first-child {
            margin-right: 18rpx;
          }
        }
      }
    }
  }
}
</style>
